<!--tab切换-->
<template>
	<view class="tour-tabs-list">
		<text class="tour-tabs-item" 
			:class="{active:targetValue === item.value}" 
			v-for="item in list" :key="item.value" 
			@tap="change(item)"
		>
		    {{item.label}}
		</text>
	</view>
</template>
<script>
export default {
	props: {
		list: {
			type: Array,
			default: ()=> []
		},
		currentValue: {
			type: Number,
			default: 0
		}
	},
	watch: {
		currentValue:{
			handler: function(val) {
				this.targetValue = val
			},
			immediate: true
		}
	},
	data(){
		return {
			targetValue: 0,
		}
	},
	methods: {
		change(item){
			this.targetValue = item.value
			this.$emit('change', item)
		}
	}
}
</script>
<style lang="less">
.tour-tabs-list{
	height: 50rpx;
	display: flex;
	.tour-tabs-item{
		height: 52rpx;
		width: 144rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// padding: 8rpx 40rpx;
		border-radius: 32rpx;
		font-size: 24rpx;
		color: @font_color;
		background: #FFFFFF;
		border: 1px solid #FFFFFF;
		margin-right: 20rpx;
		&.active{
		   color: @theme_color;
		   border: 1px solid @theme_color;
		   background: #ffffff;
		}		
	}
}
</style>



